<template>
	<view class="wdh-100 columnbox content">
		<view class="wdh-100 line-box"></view>
		<view class="rowbox type-list jus wdh-100">
			<!-- #ifdef MP -->
			<picker mode="region" @change="cityChange">
				<view class="rowbox address-box spb">
					<image src="/static/img/weizhi.png" mode="widthFix"></image>
					<view class="textovflow" style="width: 100rpx;">{{city}}</view>
					<u-icon name="arrow-down" size="24rpx" color="#8F8F8F"></u-icon>
				</view>
			</picker>
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<view class="rowbox address-box spb">
				<image src="/static/img/weizhi.png" mode="widthFix"></image>
				<view class="textovflow" style="width: 100rpx;">{{city}}</view>
				<u-icon name="arrow-down" size="24rpx" color="#8F8F8F"></u-icon>
			</view>
			<!-- #endif -->
			<picker @change="typeChange" range-key="label" :range="typeOptions" mode="selector"
				style="margin-right: 32rpx;">
				<view class="rowbox rank-title spb">
					{{typeOptions[doorType].label}}<u-icon style="margin-left: 10rpx;" size='24rpx'
						name="arrow-down"></u-icon>
				</view>
			</picker>
			<!-- <picker mode="selector">
				<view class="rowbox rank-title">
					综合排序<u-icon style="margin-left: 10rpx;" size='24rpx' name="arrow-down"></u-icon>
				</view>
			</picker> -->
		</view>
		<view @click="showDetail(item.stationId)" class="columnbox wdh-100 s-box jus" v-for="(item,index) in list"
			:key='index'>
			<view class="rowbox wdh-100 spb als">
				<image mode="aspectFill" class="s-img" :src="item.img">
				</image>
				<view class="columnbox wdh-100 spb s-info">
					<view class="rowbox wdh-100 jus">
						<view class="s-name textovflow">{{item.name}}</view>
						<view class="rowbox  type-box">
							<view class="rowbox s-qj" v-if="item.stationType==0">旗舰站</view>
							<view class="rowbox s-jm" v-else-if="item.stationType==1">标准站</view>
							<view class="rowbox s-zz" v-else-if="item.stationType==2">自助站</view>
							<view class="rowbox s-zd" v-else-if="item.stationType==3">自动站</view>
						</view>
					</view>
					<view class="rowbox wdh-100 spb" style="margin-top: 24rpx;">
						<view class="s-address textovflow" style="width: 370rpx;">{{item.address}}</view>
						<view class="s-address" style="margin-left: 20rpx;" v-if="item.distance">
							{{item.distance>1000?item.distance/1000+'KM':(item.distance+'M')}}
						</view>
						<!-- <view class="rowbox location-box" @click.stop="showMap(item)">
							<image src="/static/img/s-location.png"></image>
							导航
						</view> -->
					</view>
				</view>
			</view>
			<view class="rowbox spb wdh-100 s-door-info">
				<view class="rowbox jus">
					<view class="rowbox s-zd-status" v-if="item.zdDoor>0">
						<view class="s-zd-status-title rowbox">自动</view>
						<view class="s-zd-status-detail">闲{{item.zdDoorKx}}
							<text>/{{item.zdDoor}}</text>
						</view>
					</view>
					<view class="rowbox s-zd-status zz-status" v-if="item.zzDoor>0">
						<view class="s-zd-status-title rowbox" style="background: #00DCA9;">自助</view>
						<view class="s-zd-status-detail" style="color: #00DCA9;">闲{{item.zzDoorKx}}
							<text>/{{item.zzDoor}}</text>
						</view>
					</view>
					<view class="rowbox s-zd-status" style="background: #fdf6e3;" v-if="item.rgDoor>0">
						<view class="s-zd-status-title rowbox" style="background: #E99D42;">人工</view>
						<view class="s-zd-status-detail" style="color:#EAB300;">闲{{item.rgDoorKx}}
							<text>/{{item.rgDoor}}</text>
						</view>
					</view>
				</view>
				<view class="rowbox location-box" @click.stop="showMap(item)">
					<image src="/static/img/s-location.png"></image>
					导航
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageNum: 1,
				city: '',
				list: [],
				cityid: '',
				moreflag: false,
				doorType: 0,
				typeOptions: [{
						value: 0,
						label: '全部'
					}, {
						value: 1,
						label: '自动洗车间'
					},
					{
						value: 2,
						label: '自助洗车间'
					},
					{
						value: 3,
						label: '人工洗车间'
					}
				],
				id: '',
				lng: 114.544842,
				lat: 38.024091,
			};
		},
		onReachBottom() {
			if (this.moreflag) {
				this.pageNum++
				this.getList()
			}
		},
		onLoad(options) {
			if (options.id) {
				this.id = options.id
			} else {
				this.doorType = options.type * 1 + 1
			}
			this.city = uni.getStorageSync('city')
			this.cityid = uni.getStorageSync('cityId')
			uni.getLocation({
				success: (res) => {
					this.lat = res.latitude
					this.lng = res.longitude
					this.getList()
				},
				fail: () => {
					console.log('===2====')
					this.getList()
				}
			})

		},
		methods: {
			showMap(v) {
				uni.openLocation({
					latitude: Number(v.lat),
					longitude: Number(v.lng),
					name: v.name
				})
			},
			typeChange(e) {
				this.doorType = e.detail.value
				this.pageNum = 1
				this.list = []
				this.getList()
			},
			//商家详情
			showDetail(id) {
				if (this.id == '') {
					uni.navigateTo({
						url: '/pages/store/detail?id=' + id
					})
				} else {
					uni.navigateTo({
						url: '/pages/store/detail?id=' + id + '&couponsId=' + this.id
					})
				}
			},
			cityChange(e) {
				this.city = e.detail.value[1]
				this.cityid = e.detail.code[1]
				this.pageNum = 1
				this.list = []
				this.getList()
			},
			getList() {
				this.$req.get('/xcx/station/list/doorType', {
					cityId: this.cityid,
					pageSize: 20,
					pageNum: this.pageNum,
					doorType: this.doorType - 1,
					lng: this.lng,
					lat: this.lat
				}).then(res => {
					console.log(res)
					res.data.rows.forEach(resp => {
						resp.img = resp.listUrl
					})
					this.list = this.list.concat(res.data.rows)
					this.moreflag = res.data.rows.length == 20 ? true : false
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		font-family: PingFang SC;
		background: #F4F5FA;
		min-height: 100vh;
		justify-content: flex-start;
	}

	.line-box {
		height: 20rpx;
		background: #F7F7F7;
	}

	.type-list {
		padding: 20rpx 20rpx;
		margin-bottom: 10rpx;
	}

	.address-box {
		width: 216rpx;
		height: 60rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		padding: 14rpx 20rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #212121;

		image {
			margin-right: 10rpx;
			width: 32rpx;
			height: 32rpx;
		}
	}

	.rank-title {
		margin-left: 20rpx;
		width: 216rpx;
		height: 60rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		padding: 14rpx 20rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #212121;

	}

	.s-box {
		padding: 24rpx;
		background: #fff;
		border-radius: 24rpx;
		margin-bottom: 20rpx;

		.s-img {
			width: 160rpx;
			height: 98rpx;
			border-radius: 12rpx;
			margin-right: 16rpx;
		}

		.s-info {
			width: calc(100% - 179rpx);
			position: relative;

			.s-name {
				font-family: PingFang SC, PingFang SC;
				font-weight: 600;
				font-size: 28rpx;
				color: #000000;
				width: 200rpx;
			}

			.type-box {
				position: absolute;
				top: -24rpx;
				right: -24rpx;
			}
		}

		.s-door-info {
			border-top: #F6F6F6 solid 1px;
			width: 100%;
			margin-top: 16rpx;
			padding-top: 16rpx;
		}

		.s-zz,
		.s-jm,
		.s-zd,
		.s-qj {
			background: #5233C9;
			color: #fff;
			margin-right: 24rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 600;
			font-size: 20rpx;
			color: #FFFFFF;
			padding: 4rpx 8rpx;
			border-radius: 0px 0px 8rpx 8rpx;
		}

		.s-jm {
			background: #56A7AD;
			color: #fff;
		}

		.s-zd {
			background: #EAB300;
		}

		.s-qj {
			background: #00DCA9;
		}

		.s-zd-status {
			background: #e2edf7;
			border-radius: 8rpx;
			margin-right: 16rpx;

			.s-zd-status-title {
				background: #126BC9;
				font-family: PingFang SC, PingFang SC;
				font-weight: 600;
				font-size: 20rpx;
				color: #FFFFFF;
				padding: 4rpx 8rpx;
				border-radius: 8rpx;
			}

			.s-zd-status-detail {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 20rpx;
				color: #126BC9;
				padding: 4rpx 8rpx;
			}
		}

		.zz-status {
			background: #dffaf5;
		}

		.s-address {
			font-family: PingFang SC, PingFang SC;
			font-size: 24rpx;
			color: #72778A;
		}

		.location-box {
			font-family: PingFang SC, PingFang SC;
			font-weight: 600;
			font-size: 24rpx;
			color: #126BC9;

			image {
				width: 28rpx;
				height: 28rpx;
				margin-right: 4rpx;
			}
		}
	}
</style>